<template>
	<view>
		<view style="padding: 40rpx 0">
			<uni-steps :options="stepsList" :active="active" />
			<view style="padding: 15px 20px;margin: 10px;border-radius: 5px;background: #f9f6f6;">
				<view style="display: flex;align-items: center;">
					<view>WIFI: </view>
					<view>
						{{ wifiInfo.ssid.length && wifiInfo.password ? `${wifiInfo.ssid}/${wifiInfo.password}`: "未配置"  }}
					</view>
					<uni-icons v-if="wifiInfo.ssid.length && wifiInfo.password" type="checkbox-filled"
						color="#1cbbb4"></uni-icons>
					<uni-icons v-else type="clear" color="#e43d33"></uni-icons>
				</view>
				<view style="display: flex;align-items: center;">
					<view>蓝牙: </view>
					<view v-if="blueConnectState === 200">已连接</view>
					<view v-else>未连接</view>
					<uni-icons v-if="blueConnectState === 200" type="checkbox-filled" color="#1cbbb4"></uni-icons>
					<uni-icons v-else type="clear" color="#e43d33"></uni-icons>
				</view>
			</view>
			<view v-if="active === 0">
				<!-- 
				<uni-notice-bar show-icon scrollable text="当前设备只支持2.4G网络,如未找到网络请关闭双频合一后重试" />
				<uni-section title="请选择WIFI并输入密码" type="line" padding></uni-section> -->

				<view v-if="startWifiError">
					<view>{{ startWifiError }}</view>
					<view class="btn-next" @click="startWifi">重试</view>
				</view>
				<view v-else>
					<view class="container" v-if="wifiInfo.ssid">
						<button class="button blue">配置网络</button>
						<view class="section">
							<view class="button1">wifi名称</view>
							<input class="inputwifi" v-model="wifiInfo.ssid" type="text" placeholder="请输入wifi名称" />
						</view>
						<view style="color: #2a90e8;font-weight: 500;font-size: 14px;">
							自动测试当前手机连接的WIFI名称</view>
						<view class="section">
							<view class="button1">wifi密码</view>
							<input class="inputwifi" v-model="wifiInfo.password" type="text" placeholder="请输入wifi密码" />
						</view>
						<button class="button gray" @click="startBluetooth">开始配置</button>
					</view>
					<view v-else style="background: #f9f6f6;padding: 20px;margin: 20px;border-radius: 10px;">
						<view class="title600">未搜索到WiFi设备</view>
						<view class="p-20">请检查以下操作步骤</view>
						<view class="p-20">1:请检查设备是否联网(需和手机同一个2.4G-WIFI)</view>
						<view class="p-20">2:请检查影描机是否被连接占用</view>
					</view>
					<!-- <view class="bottom">
						<view class="btn-next" @click="active = 0" style="margin-bottom: 20rpx">上一步</view>
						<view class="btn-next" @click="startBluetooth">下一步</view>
					</view> -->
				</view>
			</view>
			<view v-if="active === 1">
				<view style="display: flex;align-items: center;height: 100rpx;padding: 60rpx 30rpx"
					@click="showBlueLinkDialog = true">
					<view style="flex: 1">蓝牙状态</view>
					<uni-icons v-if="blueConnectState === 200" type="checkbox-filled" color="#1cbbb4"></uni-icons>
					<uni-icons v-else type="clear" color="#e43d33"></uni-icons>
					<view v-if="blueConnectState === 200" style="color: #1cbbb4">已连接</view>
					<view v-else style="color: #e43d33">未连接,点击连接</view>
				</view>
				<view class="bottom">
					<view class="btn-next" @click="startWifi" style="margin-bottom: 20rpx">上一步</view>
					<view class="btn-next" @click="startConfigurationPage">下一步</view>
				</view>
			</view>
			<view v-if="active === 2">

				<uni-section title="开始配网" type="line" padding></uni-section>

				<view style="margin: 20rpx auto;" class="btn-next" @click="startConfiguration">开始配网</view>

				<view style="margin: 20rpx auto;" class="btn-next" @click="getDevInfo">开始小程序投影</view>

				<!-- <view class="bottom">
					<view style="margin: 20rpx auto;" class="btn-next" @click="clearwifiordevice">更换网络或更换投影设备</view>
				</view> -->
			</view>
		</view>
		<blue-link :show="showBlueLinkDialog" @close="getBlueState" />
	</view>
</template>

<script>
	import {
		Blue
	} from '@/utils/index.js'
	import BlueLink from "@/components/BlueLink.vue";
	export default {
		components: {
			BlueLink
		},
		data() {
			return {
				showBlueLinkDialog: false,
				active: 0,
				blueConnectState: -1,
				stepsList: [{
					title: '设置wifi'
				}, {
					title: '连接设备蓝牙'
				}, {
					title: '开始配网'
				}],
				startWifiError: '',
				wifiInfo: {
					ssid: "",
					password: "",
					ip: "",
				},
				wifiList: [],
				timer: null,
				deviceid: "",
				deviceip: ""
			};
		},
		onLoad() {

		},
		onShow() {
			// const _that = this
			// uni.onGetWifiList((res) => {
			// 	_that.wifiList = res.wifiList
			// 		.filter(item => item.SSID !== null && item.SSID !== undefined && item.SSID !== '')
			// 		.sort((a, b) => b.signalStrength - a.signalStrength)
			// 	console.log('监听wifi列表成功:' + JSON.stringify(res))
			// 	console.log(_that.wifiList, "_that.wifiList_that.wifiList_that.wifiList_that.wifiList")
			// })

			this.clearwifiordevice()
			this.startWifi()
			// this.blueConnectState = Blue.connectState
			// if (this.wifiInfo.ssid && this.wifiInfo.password) {
			// 	this.active = 2
			// } else {
			// 	this.startWifi()

			// }
			// if (this.blueConnectState === 200) {
			// 	this.active = 3
			// }

		},
		methods: {
			clearwifiordevice() {
				uni.setStorageSync('ssid', '');
				uni.setStorageSync('password', '');
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '操作成功'
				// })
				this.active = 0
			},
			connectWifi(item) {
				const _that = this
				uni.showModal({
					title: item.SSID,
					placeholderText: '请输入WiFi密码',
					editable: true,
					success: function(res) {
						if (res.confirm) {
							if (res.content.length > 0) {
								_that.wifiInfo.ssid = item.SSID
								_that.wifiInfo.password = res.content
							} else {
								uni.showToast({
									icon: 'none',
									title: '密码不能为空'
								})
							}
						}
					}
				});
			},
			startBluetooth() {
				if (this.wifiInfo.ssid && this.wifiInfo.password) {
					this.active = 1
					this.getBlueState()
					this.showBlueLinkDialog = true
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先配置WiFi'
					})
				}
			},
			startConfigurationPage() {
				if (this.blueConnectState === 200) {
					this.active = 2
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先连接设备'
					})
				}
			},
			startConfiguration() {
				uni.showLoading({
					title: "设置网络..."
				})
				Blue.configWifi(this.wifiInfo.ssid, this.wifiInfo.password).then(res => {
					if (res == "设置网络完成") {
						uni.setStorageSync('ssid', this.wifiInfo.ssid);
						uni.setStorageSync('password', this.wifiInfo.password);
						setTimeout(() => {
							uni.hideLoading();
						}, 5000);
						uni.showToast({
							icon: 'none',
							title: "信息发送，请等待设备联网"
						})
					} else {
						setTimeout(() => {
							uni.hideLoading();
						}, 5000);
						uni.showToast({
							icon: 'none',
							title: "设置网络失败"
						})
					}
				})


			},
			startWifi() {
				console.log('开始初始化wifi========》')
				const _that = this
				_that.active = 0
				uni.startWifi({
					success(res) {
						console.log('初始化wifi成功:' + JSON.stringify(res))
						uni.getConnectedWifi({
							success(res) {
								console.error('获取wifi信息成功:' + JSON.stringify(res))
								console.log(res.wifi.SSID)
								_that.wifiInfo.ssid = res.wifi.SSID
							},
							fail(res) {
								console.error('获取wifi信息失败:' + JSON.stringify(res))
								switch (res.errCode) {
									case 12000:
										_that.startWifiError = "未先调用 startWifi 接口"
										break
									case 12001:
										_that.startWifiError = "当前系统不支持相关能力"
										break
									case 12002:
										_that.startWifiError = "密码错误"
										break
									case 12005:
										_that.startWifiError = "Android 特有，未打开 Wi-Fi 开关"
										break
									case 12012:
										_that.startWifiError =
											"系统保存的 Wi-Fi 配置过期，建议忘记 Wi-Fi 后重试，仅 Android 支持"
										break
								}
							}
						})
					},
					fail(res) {
						console.error('初始化wifi失败:' + JSON.stringify(res))
					}
				})
			},
			getBlueState() {
				this.showBlueLinkDialog = false
				this.blueConnectState = Blue.connectState
			},
			getDevInfo() {
				uni.showLoading({
					title: "获取设备信息..."
				})
				Blue.getDeviceInfo().then(res => {
					console.log('获取设备信息:', res)
					if (res && res != "retry too") {
						setTimeout(() => {
							uni.hideLoading();
						}, 3000);
						uni.showToast({
							icon: 'none',
							title: "获取设备信息成功"
						})
						var tares = JSON.parse(res);
						this.deviceid = tares.id
						this.deviceip = tares.ip
						uni.setStorageSync('devip', this.deviceip);
						uni.setStorageSync('devid', this.deviceid);
						var devip = uni.getStorageSync('devip');
						var devid = uni.getStorageSync('devid');
						console.log(this.deviceid, this.deviceip)
						console.log(devip, devid)
						uni.switchTab({
							url: '/pages/tabbar/material/material'
						});

					} else {
						setTimeout(() => {
							uni.hideLoading();
						}, 3000);
						uni.showToast({
							icon: 'none',
							title: "获取设备信息失败"
						})
					}
				})

			}
		}
	}
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.button1 {
		solid: #000;
		border-right: 1px solid black;
		width: 28%;
		padding: 20px 15px;
		font-size: 16px;
		text-align: center;
		color: black;
		display: inline-block;
	}

	.inputwifi {
		margin-left: 10px;
		font-size: 16px;
		text-align: center;
	}

	.button {
		width: 90%;
		margin: 10px;
		padding: 10px;
		font-size: 16px;
		text-align: center;
		border: none;
		border-radius: 5px;
		color: white;
	}

	.blue {
		background-color: #007BFF;
	}

	.gray {
		background-color: #6c757d;
	}

	.section {
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 1px solid #000;
		border-radius: 10px;
		margin: 10px;
	}
</style>
<style lang="scss">
	page {
		background-color: white;
	}

	.title600 {
		text-align: center;
		font-size: 30px;
		font-weight: 600;
		padding-bottom: 30px;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		justify-content: space-around;
		display: flex;
		align-items: center;
		padding: 40rpx 0;
	}

	.item-wifi {
		height: 120rpx;
		margin: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		padding: 0 20rpx;
		align-items: center;
	}

	.connect-btn {
		width: 150rpx;
		height: 60rpx;
		background-color: #409EFF;
		color: white;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin: auto 20rpx;
	}

	.btn-next {
		background-color: #3c96f3;
		color: white;
		width: 90%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx
	}
</style>